<template>
	<view class="content">
		<view class="header">
			<view class="logo"><image src="../../static/logo2.png" mode="widthFix" class="logoImg"></image></view>
			<view class="title">{{ content.title }}</view>
		</view>
		<view class="list"><div class="item" v-html="content.content"></div></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [],
			channelId: '',
			id: '',
			content: ''
		};
	},
	onLoad(e) {
		this.channelId = e.channelId;
		this.id = e.id;
	},
	onShow() {
		this.init();
	},
	mounted() {
		setTimeout(() => {
			this.$nextTick(() => {
				let images = document.querySelectorAll('img');
				for (let x of images) {
					x.onclick = e => {
						uni.previewImage({
							urls: [x.src]
						});
					};
				}
			});
		}, 1000);
	},
	methods: {
		init() {
			this.$http(
				`/contents/1/${this.channelId}/${this.id}`,
				'get',
				{},
				{
					'Content-Type': 'application/json; charset=UTF-8',
					'X-SS-API-KEY': '533341d2-15bc-4719-bff5-da8cf25e9a71'
				}
			).then(({ data }) => {
				this.content = data.value;
			});
		}
	}
};
</script>

<style scoped lang="scss">
.content {
	width: 100%;
	height: 100vh;
	background-image: url(../../static/bg.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	display: flex;
	overflow: hidden;
	flex-direction: column;
}
.header {
	padding: 20rpx;
}
.logo {
	text-align: right;
	margin: 30rpx 40rpx 10rpx;
	.logoImg {
		width: 160rpx;
	}
}
.title {
	text-align: center;
	font-family: ss;
	font-size: 78rpx;
	color: #fff;
	margin: 20rpx 0;
}
.list {
	flex: 1;
	text-align: center;
	width: 80%;
	margin: 0 auto;
	overflow-x: hidden;
	.item {
		overflow-y: scroll;
		margin: 20rpx auto;
		border: 10rpx solid #009cff;
		border-radius: 30rpx;
		background-color: rgba(255, 255, 255, 0.7);
		padding: 20rpx 20rpx;
		text-align: left;
		::v-deep p {
			line-height: 1.5;
			span {
				font-size: 32rpx !important;
			}
			img {
				width: 100% !important;
				height: auto !important;
				object-fit: cover;
			}
		}
	}
}
</style>
